<template>
    <div class="hot-project-home">
        <div class="hot-project-menu">
            <div class="menu-ul">
                <div class="menu-item" v-for='(menu,index) in menus' :id="'activityTab'+index" @click="menuItemClick(index)" :key="index">
                    <div class="menu-text">{{menu.titleName}}</div>
                </div>
            </div>
        </div>
        <keep-alive>
            <component v-bind:is="currentTabComponent"></component>
        </keep-alive>
    </div>
</template>

<script>
import { mapState } from "vuex";
import newDiscount from "./newDiscount.vue";
import newActivity from "./newActivity.vue";

export default {
  name: "hot-project-home",
  data() {
    return {
      menus: [
        { component: newActivity, titleName: "最新资讯" },
        { component: newDiscount, titleName: "最新优惠" }
      ],
      curIndex: -1,
      currentTabComponent: null
    };
  },
  components: { newDiscount, newActivity },
  methods: {
    menuItemClick(index) {
      if (this.curIndex == index) return;
      this.changeTab(index);
      this.$router.replace({
        path: "/activityHome",
        query: { tabIndex: index }
      });
    },
    changeTab(index) {
      if (this.curIndex != -1) {
        let lastTab = document.getElementById("activityTab" + this.curIndex);
        lastTab.classList.remove("active");
      }
      let curTab = document.getElementById("activityTab" + index);
      curTab.classList.add("active");
      this.curIndex = index;
      let menu = this.menus[index];
      this.currentTabComponent = menu.component;
    }
  },
  activated() {},
  mounted() {
    let tabIndex = this.$route.query.tabIndex;
    if (this.curIndex == tabIndex) return;
    if (this.curIndex != -1 && tabIndex == 0) return;
    this.changeTab(tabIndex);
  },
  computed: {
    ...mapState(["path", "icon"])
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
.hot-project-home {
    font-family: 'Microsoft YaHei';
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;

    // 导航样式
    .hot-project-menu {
        width: 100%;
        flex: 0 1 0.31rem;

        .menu-ul {
            display: flex;
            justify-content: center;

            .menu-item {
                flex: 1;
                text-align: center;
                background-color: #fff;
                height: 0.31rem;

                &.active {
                    background-color: #eb9eb3;

                    .menu-text {
                        color: #fff;
                    }
                }

                .menu-text {
                    letter-spacing: 0.5px;
                    font-size: 0.13rem;
                    color: #eb9eb3;
                    line-height: 0.31rem;
                }
            }
        }
    }
}
</style>
